feat: Dashboard Redesign #160

ohansFavour · 2025-05-27T23:47:54Z

Summary of change

This change implements the new user management dashboard design

Figma: https://www.figma.com/design/9mtSPHJC5722JKymuEj4uU/Dashboard-Redesign

Problem Statement

The old dashboard's design is not consistent with SuperTokens' design system. The new dashboard improves both the UI and the UX of the old dashboard.

Summary of solution

Most of the changes are related to the styling of components and pages. The new dashboard uses radix UI component library https://www.radix-ui.com/

Test Plan

Tested on all primary browsers for:

Chrome
- Desktop
- Mobile
- Tablet
Safari
- Desktop
- Mobile
- Tablet
Firefox
- Desktop
- Mobile
- Tablet
(Optional) Tested on Safari 12 (Physical or emulator)
- iPad
- iPhone
(Optional) Tested on physical mobile and tablet device for:
- Android
- iOS (including iPadOS)

Feature tests:

Dashboard Admin access.
- Test all the POST, PUT and DELETE endpoints with admins only access enabled for the dashboard recipe.
- Test all POST, PUT and DELETE endpoints without the admins only access enabled.
Search
- Search with anything that results in an empty state in the UI (Should show an empty state explaining that there were no results)
- Search with an empty string (Dashboard should not allow this)
- Email search
  - Serach for "e" with email tag and then delete the tag (Should show one user initially then show all with pagination enabled)
  - Search for "test" with the email tag (Expect 14 results)
  - Search with "g" for email tag (Expect 3 results)
  - Search with "g" and "p" for email tag (Expect 3 results)
  - Search with "g" and "t" for email tag, then delete "t" (Expect 17 results initially, then 3)
  - Search with "@" for email tag (Expect 0 results (This is because at the time of adding this case we would only check for the start of the email or the domain and not any character inside the full email))
  - Search for "[email protected]" with email tag (Expect 1 result)
  - Search for "[email protected]" with email tag (Expect 3 results)
  - Search for "gmail" with email tag (Expect 3 results)
  - Search for "ABC" with email tag (Expect 0 results)
  - Search for "a" with email tag (Expect 0 results (This is because at the time of adding this we only check if the email starts with the query and not contains))
  - Search for "team" with email tag (Expect 0 results)
  - Search for "782" with email tag (Expect 1 result)
- Phone search
  - Search for "1" with phone tag (Expect 3 results)
  - Search for "+1" with phone tag (Expect 3 results)
  - Search for "91" with phone tag (Expect 1 result)
  - Search for "291" with phone tag (Expect 0 results)
  - Search for "+12" with phone tag (Expect 2 results)
  - Search for "5" with phone tag (Expect 0 results)
  - Search for "1(" with phone tag (Expect 0 results (This is because we render phone numbers with brackets so users may end up searching with that))
- Provider search
  - Search for "g" with provider tag (Expect 5 results)
  - Search for "gi" with provider tag (Expect 2 results)
  - Search for "t" with provider tag (Expect 0 results)
  - Search for "google" with provider tag (Expect 3 results)
- Combination testing
  - Search with "g" for email tag and "g" for provider tag (Expect 1 result)
  - Search for "github" with provider tag and "782" with email tag (Expect 1 result)
  - Search for "github" and "google" with provider tag (Expect 5 results)
  - Search for "j" and "g" with email tag (Expect 6 results)
  - Search for "1" and "91" with phone tag (Expect 4 results)
  - Search with "google" for provider tag and "1" for phone tag (Expect 0 results)
  - Search for "g" with email tag and "1" with phone tag (Expect 0 results)
  - Search for "k" with provider and "a", "g", "b" (in that order) for email (Expect 0 resutls)
General UI testing
- Test that emty state renders fine (no overflow, no UI glitches, responsiveness etc)
- Test that the list renders fine (no overflow, no UI glitches, responsiveness etc)
- Test that pagination is visiable and usable (There should be at least 2 pages worth of users)
- Test that the list only shows 10 users at a time
- Test that for users with no accounts linked the auth method i nthe list is correct
- Test that for users with multiple login methods, the auth method shows correctly
- Test that search is visible if the feature is enabled
Multi tenant testing
- Create one tenant (tenant1), and add 3 users to them. In the dashboard, when you switch to that tenant, it should list those users.
- Create a user in tenant1 and using backend sdk's(Go, Python, Node) associate the user to a different tenant and select that tenant on the dashboard from the tenants dropdown, it should show that user in the list
User Roles and Permissions testing
- UserRoles page testing
  - Test the empty state when there are no roles created on the roles page.
  - Test creation, delete and updating functionality of the roles are working properly.
  - Test pagination of the roles list with more than 2 or 3 pages of data atleast.
  - Test that the permissions per role are rendering properly without overflowing the parent table.
  - Check for the feature_not_enabled state on both userDetails page and user roles page.
- userDetails page testing with respect to roles and permissions.
  - Test adding and deleting roles to a user.
  - Test the roles search feature and make sure that the list does not include any assigned roles in it.
  - Test by associating the user with multiple tenants and assigning roles to the user in each tenant separately.
User creation
- Test without initializing any recipes on the backend SDK and ensure that the UI responds with correct alert errors.
- Ensure the relevant warning message is shown while switching between authentication methods.
- EmailPassword user creation.
  - Test EmailPassword user creation by enabling both emailpassword and thirdpartyemailpassword together and individually.
  - Test with custom form field validators; make sure that the overrides are working properly.
  - Test default email and password validations to ensure they are working properly.
  - Test that no duplicate users are created with the same email address.
- Passwordless user creation.
  - Test Passwordless user creation by enabling both passwordless and thirdpartypasswordless together and individually.
  - Test creating a user with different contactMethod's ensure that the frontend displays relevant UI based on the contactMethod selected.
  - Test default email and phoneNumber validations to ensure they are working properly.
  - Test user-defined custom email and phoneNumber validators to ensure they are working properly.
- Test AccountLinking by creating an emailpassword and passwordless user with the same email and make sure that the accounts are linked.
User details
- Can edit email of non third party login method if there is only 1 login method for the user
- Can edit email of non third party login method if there are >= 2 login methods for the user
- Deleting a non primary login method for a user only deletes that login method, and not the whole user
- Deleting a primary login method for a user deletes only that primary login method and not the user
- Deleting a user deletes all the login methods for that user as well
Tenant Management
- Tenant Listing page
  - There should be only one tenant by default (public) and the login methods should be same as what is initialised in the SDK
    - Initialise only thirdparty and emailpassword recipe and check if only emailpassword and thirdparty is shown for the public tenant
    - Initialise passwordless with different contact methods and flow type and ensure the factor toggles are reflected as per what is initialised
  - Create a new tenant
    - Should display an error message if multitenancy license is not added to the core
    - Should be able to create tenant once the multitenancy license is added to the core
    - Should not be able to create tenants with some stop words like recipe, config, hello, appid-t1
    - Should not be able to create tenants with special characters in the name
    - When creating a tenant with capital letters, it should automatically convert to lowercase once the tenant is created
    - For newly created tenant, no recipes should be enabled by default
    - Creating more than 10 tenants should show pagination
    - Creating existing tenant id should show an error
  - Tenant search and pagination
    - Should be able to search for tenants
    - Tenant search should be case insensitive
    - Tenant search should match if the sub-string is in the middle of the tenant name
    - When tenant search matches with more than 10 tenants, pagination should still be active
    - When there is a search term, click on a tenant and then come back to the tenant listing page. The search term should remain.
  - Tenant details
    - The whole tenant row must be clickable and on click should take to tenant details page
    - Create some users for the tenant and ensure user count matches
    - See users button must take you to users listing page with the tenant selected on a new window
    - Should see a warning when no login methods are enabled
    - Enabled login methods
      - Should be able to toggle only login methods based on the initialised recipes
        
        if only thirdparty and emailpassword recipe is initialised, should not be able to turn on any of the passwordless login methods (otp-phone, otp-email, etc)
        
        if passwordless is initialised with contact method email only, should not be able to turn on otp-phone, link-phone
      - should be able to turn off all login methods
    - Secondary login methods
      - With mfa not initialised, should not be able to turn on any secondary login methods
      - Should be able to toggle only login methods based on initialised recipes
        
        If passwordless is not initialised, should not be able to turn on otp-phone
        
        If totp is not initialised, should not be able to turn on totp
        
        If passwordless is initialised with contact method email only, should not be able to turn on otp-phone
        
        Once all the recipes are initialised, should be able to turn on/off all the secondary login methods
    - Social/Enterprise logins
      - This section should not be visible if thirdparty login method is turned off
      - This section should be visible if thirdparty login method is turned on
      - With static provider list
        
        The static provider list should show up by default for all the tenants
        
        Should be able to delete third party providers from static list
        
        When deleting the last one, thirdparty should get disabled
        
        When there are no providers for a tenant, when turning on thirdparty login method, a popup to add a third party provider should be shown
      - For creating Enterprise providers, there should be an additional step where the user has to provide directoryId or okta domain, etc. When a valid value is entered, the OIDC endpoint and other endpoints should be populated automatically.
        
        If directoryId or okta domain is invalid, appropriate error message should be shown
      - In the thirdparty form, all the fields should be editable and persist correctly. Change every field, save and then go into edit mode again and check if the change has been persisted correctly.
      - Should be able to add all built-in providers. When adding provider, check relavant fields are already populated, like OIDC endpoint, authorization endpoint, token endpoint, etc.
      - Clients list
        
        Should be able to add / remove clients in any order
        
        Client Type should be required whenever there are more than 1 clients
        
        Minimum one client should be required
        
        Should not be able to save when required fields are not filled
      - Fake email generation
        
        Should ask for fake email generation when Sometimes option is selected for How often does the provider return email?
        
        Should not ask for fake email generation when Always option is selected for How often does the provider return email?
        
        Should not ask for fake email generation when Never option is selected for How often does the provider return email?
        
        Select never option and save the provider. Come back into edit mode of this, we should see that the option is Sometimes and the fake email generation is set to true

Documentation changes

(If relevant, please create a PR in our docs repo, or create a checklist here highlighting the necessary changes)

Checklist for important updates

Changelog has been updated
Changes to the version if needed
- In package.json
- In package-lock.json
- In src/version.ts
Had run npm run build
Had installed and ran the pre-commit hook

Remaining TODOs for this PR

Item1
Item2

djuelg · 2025-08-05T06:48:58Z

Hi, @ohansFavour, just out of curiosity, is there already a rough estimate when this change will get published?

Provider changes

porcellus

Partial review

porcellus · 2025-10-11T16:19:01Z

src/api/analytics/index.ts

+export const useAnalyticsService = () => {
+	const fetchData = useFetchData();
+
+	const fireEvent = async (data: Record<string, unknown>) => {


Shouldn't this be inside a useCallback?

porcellus · 2025-10-11T17:02:32Z

src/features/analytics/hooks/useAnalytics.ts

+		try {
+			let email: string | null = "[email protected]";
+
+			if (getAuthMode() === "email-password") {


Why don't we do this for TP logins?

authMode represents the authentication method used to sign into the dashboard. We currently support two modes: api-key and email-password

porcellus · 2025-10-11T20:47:58Z

src/features/roles-and-permissions/modals/addNewProvider/index.tsx

+							<Box
+								key={provider.id}
+								className="add-new-provider-modal__providers__list__item">
+								<Button


where is the action defined for this?

Please ignore. Deleted file

porcellus · 2025-10-11T20:52:13Z

src/features/roles-and-permissions/modals/CreateNewRoleModal.tsx

+
+import { useRolesList } from "../hooks";
+
+interface CreateNewRoleModalProps {


I'd prefer if we didn't use interfaces at all

Suggested change

interface CreateNewRoleModalProps {

type CreateNewRoleModalProps = {

porcellus · 2025-10-12T14:08:10Z

src/features/users/hooks/useUsers.ts

+			void queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === QUERY_KEYS.USERS_SEARCH });
+			void queryClient.invalidateQueries({
+				predicate: (query) => query.queryKey[0] === QUERY_KEYS.USERS_INFINITE,
+			});
+			void queryClient.invalidateQueries({ predicate: (query) => query.queryKey[0] === QUERY_KEYS.USERS_COUNT });


Shouldn't we include the tenant ID in the query key instead?

porcellus · 2025-10-12T20:11:34Z

src/features/tenants/modals/EditConfigurationPropertyModal.tsx

+	const toggleNull = () => {
+		if (currentValue === null) {
+			// Restore to default value or appropriate zero value
+			if (config.valueType === "number") {
+				setCurrentValue(config.defaultValue !== null ? config.defaultValue : 0);
+			} else if (config.valueType === "boolean") {
+				setCurrentValue(config.defaultValue !== null ? config.defaultValue : false);
+			} else {
+				setCurrentValue(config.defaultValue !== null ? config.defaultValue : "");
+			}
+		} else {
+			setCurrentValue(null);
+		}
+	};


This should be a useCallback w/ setCurrentValue(currentValue => ...

porcellus · 2025-10-12T20:16:02Z

src/features/tenants/modals/EditConfigurationPropertyModal.tsx

+		}
+	};
+
+	const renderValueInput = () => {


Why was this extracted like this?

Just a personal preference. Extracting this logic makes the main component's JSX cleaner and easier to read, with the complex input rendering logic abstracted away.

porcellus · 2025-10-12T20:16:14Z

src/features/tenants/modals/EditConfigurationPropertyModal.tsx

+		}
+	};
+
+	const handleSaveProperty = async () => {


useCallback

Good suggestion. In this case, handleSaveProperty isn’t passed to any memoized child or used in a dependency array, so wrapping it in useCallback wouldn’t provide a measurable benefit. Since it’s only used locally within this component, keeping it as a regular function keeps the code simpler and easier to read. If we later memoize Button or reuse this handler, I’ll revisit adding useCallback.

porcellus · 2025-10-12T20:54:23Z

src/features/tenants/tenant-details/core-configuration/CoreConfigTableRow.tsx

+				</Flex>
+			</Flex>
+
+			{isEditModalOpen && (


are these rendered for every row?

Nice catch. I have moved these to the table component

porcellus · 2025-10-12T21:06:15Z

src/features/tenants/tenant-details/core-configuration/PluginPropertiesSection.tsx

+	databaseType: "postgres" | "mysql" | null;
+}
+
+export default function PluginPropertiesSection({


I'd prefer it if PluginProperties* was renamed to DatabaseProperties

porcellus · 2025-10-15T15:02:21Z

src/features/tenants/tenant-details/provider-configuration/ProviderConfiguration.tsx

+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [tenantId, providerId, isAddingNewProvider, initialProviderConfigResponse]);
+
+	const handleThirdPartyIdSuffixChange = (e: React.ChangeEvent<HTMLInputElement>) => {


Please rework these to handlers to use callbacks passed to the state setter in order to avoid dependencies on the current value and use useCallback to memoize them.

Updated ✅

porcellus · 2025-10-15T15:09:19Z

src/features/tenants/tenant-details/provider-configuration/providerConfigValidation.ts

+	errors: ValidationErrors
+): void => {
+	// Validate client ID
+	if (typeof client.clientId !== "string" || client.clientId.trim() === "") {


Why not reuse the above validators?

Updated ✅

porcellus · 2025-10-15T15:29:26Z

src/features/tenants/tenant-details/TenantDetails.tsx

+			await onDeleteTenant();
+			goToTenantsList();
+		} catch (err) {
+			// Error handling


Updated ✅

porcellus · 2025-10-15T15:31:39Z

src/features/tenants/Page.tsx

+	const [searchParams] = useSearchParams();
+	const tenantId = searchParams.get(QUERY_PARAMS.TENANT_ID);
+
+	return tenantId ? <TenantDetails /> : <TenantsList />;


Why don't we pass tenantId as a prop if we get it here?

Updated ✅

porcellus · 2025-10-15T19:57:46Z

src/features/users/components/user-details/login-methods/LoginMethodCard.tsx

+	const [openDeleteModal, setOpenDeleteModal] = useState(false);
+	const [openUnlinkModal, setOpenUnlinkModal] = useState(false);
+
+	// VERIFY


lets discuss then

The current implementation (status quo) uses

user.isPrimaryUser && user.loginMethods.length === 1. This allows unlinking the last login method for primary users. This seems problematic

porcellus · 2025-10-16T22:11:18Z

src/shared/utils/storage.ts

+export const setSelectedTenantIdToLocalStorage = (tenantId: string) => {
+	localStorageHandler.setItem(StorageKeys.TENANT_ID, tenantId);
+};
+
+export const getSelectedTenantIdFromLocalStorage = (): string | undefined => {
+	return localStorageHandler.getItem(StorageKeys.TENANT_ID);
+};


I'd much prefer if we did this based on the path or some queryparam

porcellus · 2025-10-16T22:12:00Z

src/shared/version.ts

+ * under the License.
+ */
+
+export const package_version = "0.13.0";


this needs to be updated.

porcellus · 2025-10-16T22:13:44Z

src/ui/components/tenants/tenantDetail/thirdPartyPage/ThirdPartyPage.tsx

@@ -47,7 +47,7 @@ export const ThirdPartyPage = ({
 				<span>Back to tenant info</span>
 			</button>
 			<div className="third-party-section__cards">
-				<TenantDetailHeader onlyShowTenantId />
+				{/* <TenantDetailHeader onlyShowTenantId /> */}


Please either remove it completely (incl the comment) or not, but don't leave it as a comment.

porcellus · 2025-10-16T22:15:12Z

src/utils/generateRandomId.ts

+ * under the License.
+ */
+
+export const generateRandomId = (): number => {


Are these files duplicated?

porcellus · 2025-10-16T22:18:55Z

src/shared/components/search/index.tsx

+	}, [availableTags]);
+
+	// Trigger search when search entries change
+	useEffect(() => {


why is this triggered using a useEffect?

…ling commit

ohansFavour added 3 commits May 27, 2025 22:26

Button component

663a539

Install and configure radix ui

55d6574

💇‍♀️: Update layout styles

c57fb41

ohansFavour marked this pull request as draft May 27, 2025 23:48

ohansFavour changed the title ~~Feat/dashboard redesign~~ Feat: Dashboard Redesign May 27, 2025

ohansFavour changed the title ~~Feat: Dashboard Redesign~~ feat: Dashboard Redesign May 27, 2025

ohansFavour added 15 commits May 28, 2025 00:51

➕ : Update CHANGELOG.md

fb5f26f

💇‍♀️: Use Inter font

d16278e

🛠 Add cursor rules

ab0dc44

💇‍♀️: Create Section Container

b197b72

💇‍♀️: Create Page container

704dc9e

Update main layout padding

50b8285

Rename sectionContainer => paper

a4b92d9

Create Modal component

c5be68e

➕ create callout component

9379ad4

✍️ Update variable list

6a491b5

🚧 WIP: User list

64c7be1

➕ Add filter icon to list of images

095fb64

✅ User List design complete

10fc30a

🚧 WIP: User Management page user list

97831ff

🚧 WIP: Users list

7f874b3

ohansFavour added 8 commits September 19, 2025 02:37

WIP: Create User

8ed94de

Update build

4b5daa0

Create Passwordless user

ad1e446

Create User UI

161adf1

Update Create User Logic

ee14229

✅: Complete User List Page

af0d096

WIP: User Details

99b6719

✅ UI: User detail modals

a50ab1a

ohansFavour added 13 commits October 7, 2025 16:47

🚧 WIP: tenant details: providers

b19dbd3

🚧 wip: providers tab

c58806c

🛠 Fix styles in provider tab

83460a5

🚧 WIP: Login Methods (primary + secondary)

9431af8

✅ Complete login methods preview

061033f

💇‍♀️ improve code structure: Supertokens Preview

7eb98c7

✅ Secondary factors complete

866aeb4

🛠 Fix UI bugs in tenants details page

38cb978

🚧 WIP: Tenant Details - Providers

41305a1

🚧 WIP: tenant details: providers

5ec296e

🚧 WIP: Provider Configuration

16a6686

Merge pull request #161 from supertokens/provider-changes

37af0bc

Provider changes

✨ Chore: Change default tenant details tab

1164c4a

porcellus requested changes Oct 12, 2025

View reviewed changes

ohansFavour added 7 commits October 15, 2025 19:07

✅ Signout functionality

5eff9a1

💇‍♀️: Add loading state to signout functionality

7f44ed5

✅ Migrate authentication pages

538449a

✅ Migrate Access denied and Env

f3990ab

🛠: Replace team@supertokens with support@supertokens

852e53c

🛠 Update api route imports

159b3b7

💇‍♀️: Update User roles table styles

296cf6b

porcellus requested changes Oct 16, 2025

View reviewed changes

ohansFavour added 8 commits October 21, 2025 01:11

✅ Clear old files

b463642

🛠: Fix UNSAFE_componentWillMount warning

e668cf1

Version codes in version.ts and package.json are not the same, cancel…

1af7115

…ling commit

🛠 Fix: Error in auth screens

d5ed7b8

🚧 WIP: Review comments

7b039d4

🚧 WIP: Review comments

ae50413

🚧 WIP: Review comments

9bfb6c0

🚧 WIP: Review comments

8b394db


		import { useRolesList } from "../hooks";

		interface CreateNewRoleModalProps {

	interface CreateNewRoleModalProps {
	type CreateNewRoleModalProps = {

feat: Dashboard Redesign #160

Are you sure you want to change the base?

feat: Dashboard Redesign #160

Conversation

ohansFavour commented May 27, 2025

Summary of change

Problem Statement

Summary of solution

Test Plan

Tested on all primary browsers for:

Feature tests:

Documentation changes

Checklist for important updates

Remaining TODOs for this PR

Uh oh!

djuelg commented Aug 5, 2025

Uh oh!

porcellus left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!